<script setup>
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { library } from '@fortawesome/fontawesome-svg-core'
import { 
  faGlobe, 
  faFileLines 
} from '@fortawesome/free-solid-svg-icons'

library.add(faGlobe, faFileLines)

const scrollToCountries = () => {
  const countriesSection = document.getElementById('visa-countries')
  if (countriesSection) {
    countriesSection.scrollIntoView({ behavior: 'smooth' })
  }
}

const scrollToFAQ = () => {
  const faqSection = document.getElementById('visa-faq')
  if (faqSection) {
    faqSection.scrollIntoView({ behavior: 'smooth' })
  }
}
</script>

<template>
  <section class="visa-hero">
    <div class="container">
      <div class="hero-content">
        <h1 class="title">中国签证与入境政策</h1>
        <h2 class="subtitle">免签政策全面优化，欢迎探索中国之美</h2>
        <p class="description">即日起，过境免签停留时间延长至240小时(10天)，适用54国公民</p>
        <div class="cta-buttons">
          <button class="primary-btn" @click="scrollToCountries">
            <font-awesome-icon :icon="faGlobe" class="btn-icon" />
            查看适用国家
          </button>
          <button class="secondary-btn" @click="scrollToFAQ">
            <font-awesome-icon :icon="faFileLines" class="btn-icon" />
            了解申请流程
          </button>
        </div>
      </div>
    </div>
  </section>
</template>

<style scoped>
.visa-hero {
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('@/assets/bg1.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 120px 0 80px;
  position: relative;
  overflow: hidden;
}

.hero-content {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

.title {
  font-size: 42px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 20px;
}

.subtitle {
  font-size: 28px;
  font-weight: 500;
  color: #ffffff;
  margin-bottom: 24px;
}

.description {
  font-size: 18px;
  color: #ffffff;
  margin-bottom: 40px;
  line-height: 1.6;
}

.cta-buttons {
  display: flex;
  justify-content: center;
  gap: 16px;
}

.primary-btn {
  background-color: #16a34a;
  color: white;
  padding: 12px 32px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.primary-btn:hover {
  background-color: #15803d;
}

.secondary-btn {
  background-color: white;
  color: #16a34a;
  border: 2px solid #16a34a;
  padding: 12px 32px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.secondary-btn:hover {
  background-color: #f0fdf4;
}

.btn-icon {
  margin-right: 8px;
}

.primary-btn, .secondary-btn {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style> 